<template>
	<CustomNavBar :showBack="true" :leftNav="false">
	</CustomNavBar>
	<view class="paes">
		<view class="images">
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/login.png" mode="aspectFit" class="imags">
			</image>
		</view>
		<view class="poos">
			<view class="tops" style="width: 100%;height: 238rpx;"></view>
			<view class="titles">
				Hello!
			</view>
			<view class="titles1">
				欢迎来到 omo 租房
			</view>
			<view class="doms">
				<view style="text-align: center;margin-bottom: 30rpx;font-size: 32rpx;">
					手机验证码登录
				</view>
				<view class="contens">
					<input type="text" v-model="data.phoneNumber" placeholder="请输入手机号码" class="full_flex" />
				</view>
				<view class="contens contens1">
					<input type="text" v-model="data.codePone" placeholder="请输入验证码" class="full_flex full_flex1" />
					<view class="tistCode dis" @click="getCode">
						{{data.nums==0?data.code:data.nums}}
					</view>
				</view>
				<view class="botns dis" @click="handleClick" :style="{opacity:surePass?1:0.5}">
					登录
				</view>
			</view>

			<view class="Agreement">
				<view class="imaes" @click="data.select = !data.select">
					<image src="/pagesA/static/noselect.png" mode="aspectFit" class="noSelect" v-if="!data.select">
					</image>
					<image src="/pagesA/static/selectTrue.png" mode="aspectFit" class="noSelect noSelect1" v-else>
					</image>

				</view>
				<view class="text">
					我已阅读并同意
				</view>
				<view class="text text1" @click="handleWebView('userProtocol')">
					《用户协议》
				</view>
				<view class="text" style="margin: 0;">
					和
				</view>
				<view class="text text1" @click="handleWebView('privacyPolicy')">
					《隐私政策》
				</view>
			</view>

		</view>
		<view class="footer">
			<view class="title-line">
				<text class="line"></text>
				<text class="title">微信快速登录</text>
				<text class="line"></text>
			</view>
			<!-- 未勾选同意需先天框提示 -->
			<image src="/pagesA/static/wxicon.png" v-if="!data.select" @click="handleVerdict" mode="" class="tap-icon"
				style="margin: 12px 0 25px 0;"></image>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumberClick" v-else
				style="margin: 12px 0 25px 0;height: 80rpx;">
				<image src="/pagesA/static/wxicon.png" mode="" class="tap-icon"></image>
			</button>
		</view>
	</view>

</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import http from '@/uitls/http.js'
	import {
		logins,
		loginApp,
		loginWx
	} from './js/api';
	import {
		validatePhone
	} from '@/uitls/check.js'
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	//判断按钮的透明度，给于颜色反馈
	const surePass = computed(() => {
		let result = false
		if (data.phoneNumber && data.codePone && data.select) result = true
		return result
	})
	const app = getApp()

	const data = reactive({
		
		code: '获取验证码',
		phoneNumber: '',
		intervalId: null,
		nums: 0,
		select: false,
		codePone: '',

		isLogins: false, //是否登录
	})
	
	//点击手机号登录
	const handleClick = async () => {
		if (!data.phoneNumber || !data.codePone) return http.isMssage('请输入手机号码或验证码')
		if (!data.select) return http.isMssage('请勾选用户协议')
		data.isLogins = true
		try {
			const loginRes = await uni.login({
				provider: 'weixin'
			});
			const res = await loginApp({
				code: data.codePone,
				phone: data.phoneNumber,
				wxCode: loginRes.code
			})
			if (res.data.code != 0) {
				data.isLogins = false
				return http.isMssage(res.data.message)
			}
			data.isLogins = false
			// console.log(res)
			uni.setStorageSync('token', res.data.data)
			app.setIsLogins()
			app.setPhoneNumber(data.phoneNumber)
			uni.reLaunch({
				url: '/pages/home/home',
			})
		} catch (err) {
			data.isLogins = false
		}
	}
	
	//获取验证码
	const getCode = async () => {
		// console.log(data.phoneNumber)
		if (!validatePhone(data.phoneNumber)) return
		const res = await logins({
			phone: data.phoneNumber,

		})
		// const {data} = res;
		if (res.data.code != 0) {
			return http.isMssage(res.data.message)
		}
		data.nums = 60
		const intervalId = setInterval(() => {
			if (data.nums > 1) {
				data.nums--
			} else {
				data.nums = 0
				data.code = '重新获取'
				clearInterval(intervalId)
			}
		}, 1000)


	}

	//跳转查看用户协议
	const handleWebView = (type) => {
		uni.navigateTo({
			url: '/pagesA/webView/webView?type=' + type
		})
	}

	//一键微信登录，改点微信图标登录
	const getPhoneNumberClick = async (e) => {
		if (!data.select) return http.isMssage('请勾选用户协议')
		let code = e.detail.code
		// console.log( e)
		if (!code) return false
		const loginRes = await uni.login({
			provider: 'weixin'
		});
		let res = await loginWx({
			code,
			wxCode: loginRes.code
		})
		if (res.data.code != 0) {
			data.isLogins = false
			return http.isMssage(res.data.message)
		}
		data.isLogins = false
		uni.setStorageSync('token', res.data.data)
		app.setIsLogins()
		// app.setPhoneNumber(data.phoneNumber)
		uni.reLaunch({
			url: '/pages/home/home',
		})
		app.agetInfoData()
	}

	//提示勾选协议
	const handleVerdict = () => {
		http.isMssage('请勾选用户协议')
	}
</script>

<style lang="less" scoped>
	.paes {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom, #FCEEC8 0%, #F6F6F6 100%);

		.images {
			width: 100%;
			height: 750rpx;

			.imags {
				width: 100%;
				height: 750rpx;
			}
		}

		.poos {
			position: fixed;
			top: 0;
			height: 100vh;
			width: 690rpx;
			left: 30rpx;

			// border: 1px solid red;
			.titles {
				font-family: AlimamaShuHeiTi-Bold;
				font-size: 72rpx;
				color: #000000;
				line-height: 90rpx;
				font-weight: 700;
			}

			.titles1 {
				margin-top: 16rpx;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 400;
			}

			.doms {
				width: 100%;
				background: #FFFFFF;
				margin-top: 124rpx;
				border-radius: 40rpx;
				padding: 50rpx 0;

				.contens {
					width: 100%;
					margin: auto;
					// margin-top: 40rpx;
					background: #F3F5F9;
					border-radius: 50rpx;
					width: 626rpx;
					height: 100rpx;

					.full_flex {
						width: 586rpx;
						height: 100%;
						margin-left: 40rpx;
					}

					.full_flex1 {
						width: 460rpx;
					}

					.tistCode {
						min-width: 140rpx;
						font-family: PingFangSC-Regular;
						font-size: 28rpx;
						color: #666666;
						text-align: right;
						line-height: 40rpx;
						font-weight: 400;
						margin-right: 40rpx;
						// border: 1px solid red;
						height: 100%;
					}
				}

				.contens1 {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
				}

				.botns {
					margin: auto;
					width: 626rpx;
					height: 90rpx;
					opacity: 0.5;
					background-image: linear-gradient(to left, #F1B13F 0%, #F8D648 100%);
					border-radius: 50rpx;
					margin-top: 50rpx;
					font-family: PingFangSC-Regular;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: right;
					line-height: 40rpx;
					font-weight: 400;
				}




			}



			.Agreement {
				// position: absolute;
				// bottom: 76rpx;
				width: 100%;
				height: 30rpx;
				// border: 1px solid red;
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.imaes {
					width: 40rpx;
					height: 40rpx;
					margin-left: 83rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.noSelect {
						width: 100%;
						height: 100%;
					}

					.noSelect1 {
						position: absolute;
					}
				}

				.text {
					margin-left: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #000000;
					line-height: 30rpx;
					font-weight: 400;
				}

				.text1 {
					color: #EE7930;
					margin: 0;
				}
			}
		}
	}

	button::after {
		border: none;
		/* 去除默认边框 */
		border-radius: 0;
		/* 确保伪元素也没有圆角 */
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title-line {
			display: flex;
			justify-content: center;
			align-items: center;

			.line {
				width: 200rpx;
				height: 2rpx;
				background: #e3e4e5;
			}

			.title {
				font-size: 24rpx;
				color: #999;
				padding: 0 30rpx;
			}
		}

		.tap-icon {
			width: 80rpx;
			height: 80rpx;
			// margin: 30rpx 0 60rpx 0;
		}
	}
</style>